<template>
	<div>
		<el-row>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="流失统计" name="first">
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">区域:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
								<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">品牌:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
								<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">公司:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
								<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
							</el-select>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">统计区间:</p>
						</el-col>
						<el-col :span='4'>
							<el-date-picker v-model="queryData.startDate" format="yyyy-MM-dd" size="small" style="width:90%;" type="date" clearable placeholder="">
							</el-date-picker>
						</el-col>
						<el-col :span='4'>
							<el-date-picker v-model="queryData.stopDate" format="yyyy-MM-dd" size="small" style="width:90%;" type="date" clearable placeholder="">
							</el-date-picker>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">统计口径:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="queryData.statisticalCaliber" @change="changeSelect" clearable>
								<el-option label="车辆类别" value="0">
								</el-option>
								<el-option label="流失方向" value="1">
								</el-option>
								<el-option label="流失原因" value="2">
								</el-option>
								<el-option label="回访失败" value="3">
								</el-option>
							</el-select>
						</el-col>
					</el-row>
					<!--
                    	作者：1040117458@qq.com
                    	时间：2017-05-17
                    	描述：回访失败
                    -->
					<el-row :gutter="24" v-if="queryData.statisticalCaliber =='0'">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">流失原因:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="queryData.lostReason" clearable>
								<el-option label="车辆转让或报废" value="clzr">
								</el-option>
								<el-option label="人在外地没时间保养" value="rzwd">
								</el-option>
								<el-option label="过路车" value="glc">
								</el-option>
								<el-option label="车很少用" value="chsy">
								</el-option>
								<el-option label="非车主本人接听电话" value="fbr">
								</el-option>
								<el-option label="外地车" value="qdc">
								</el-option>

								<el-option label="维修质量" value="wxzl">
								</el-option>
								<el-option label="维修价格" value="wxjg">
								</el-option>
								<el-option label="维修效率" value="wxxl">
								</el-option>
								<el-option label="服务态度" value="fwtd">
								</el-option>
								<el-option label="服务环境" value="fwhj">
								</el-option>
								<el-option label="路程远" value="lcy">
								</el-option>
								<el-option label="其他" value="qt">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">回访失败:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="queryData.failReason" clearable>
								<el-option label="电话错误停机或空号" value="dhtj">
								</el-option>
								<el-option label="人员不符" value="rybf">
								</el-option>
								<el-option label="未接通" value="wjt">
								</el-option>
								<el-option label="客户拒访" value="khjf">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">流失方向:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="queryData.lostDirection" clearable>
								<el-option v-for="item in  missTargetCombo " :label="item.name" :value="item.code">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="2" style="margin-left: -30px;text-align: right;">
							<el-button type="primary" size="small" @click="query">查询</el-button>
						</el-col>
					</el-row>
					<!--
                    	作者：1040117458@qq.com
                    	时间：2017-05-17
                    	描述：流失原因
                    -->
					<el-row :gutter="24" v-if="queryData.statisticalCaliber =='1'">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">流失原因:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="queryData.lostReason" clearable>
								<el-option label="车辆转让或报废" value="clzr">
								</el-option>
								<el-option label="人在外地没时间保养" value="rzwd">
								</el-option>
								<el-option label="过路车" value="glc">
								</el-option>
								<el-option label="车很少用" value="chsy">
								</el-option>
								<el-option label="非车主本人接听电话" value="fbr">
								</el-option>
								<el-option label="外地车" value="qdc">
								</el-option>

								<el-option label="维修质量" value="wxzl">
								</el-option>
								<el-option label="维修价格" value="wxjg">
								</el-option>
								<el-option label="维修效率" value="wxxl">
								</el-option>
								<el-option label="服务态度" value="fwtd">
								</el-option>
								<el-option label="服务环境" value="fwhj">
								</el-option>
								<el-option label="路程远" value="lcy">
								</el-option>
								<el-option label="其他" value="qt">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆大类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="queryData.carPtype" size='small' placeholder="车辆大类" clearable @change="taskStatusChange">
								<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆细类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="queryData.carCtype" size='small' placeholder="车辆细类" clearable>
								<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="2" style="margin-left: -30px;text-align: right;">
							<el-button type="primary" size="small" @click="query">查询</el-button>
						</el-col>
					</el-row>
					<!--
                    	作者：1040117458@qq.com
                    	时间：2017-05-17
                    	描述：流失方向
                    -->
					<el-row :gutter="24" v-if="queryData.statisticalCaliber =='2'">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">流失方向:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="queryData.lostDirection" clearable>
								<el-option v-for="item in  missTargetCombo " :label="item.name" :value="item.code">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆大类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="queryData.carPtype" size='small' placeholder="车辆大类" clearable @change="taskStatusChange">
								<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆细类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="queryData.carCtype" size='small' placeholder="车辆细类" clearable>
								<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="2" style="margin-left: -30px;text-align: right;">
							<el-button type="primary" size="small" @click="query">查询</el-button>
						</el-col>
					</el-row>
					<!--
                    	作者：1040117458@qq.com
                    	时间：2017-05-17
                    	描述：车辆类别
                    -->
					<el-row :gutter="24" v-if="queryData.statisticalCaliber =='3'">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆大类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="queryData.carPtype" size='small' placeholder="车辆大类" clearable @change="taskStatusChange">
								<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆细类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="queryData.carCtype" size='small' placeholder="车辆细类" clearable>
								<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="2" style="margin-left: -20px;text-align: right;">
							<el-button type="primary" size="small" @click="query">查询</el-button>
						</el-col>
					</el-row>
					<!--
                    	作者：1040117458@qq.com
                    	时间：2017-05-17
                    	描述：大饼图
                    -->
					<div id="charts">
						<div id="main" :style="{width:'100%',height:'450px'}"></div>
					</div>
				</el-tab-pane>
				<!--
                	作者：1040117458@qq.com
                	时间：2017-05-23
                	描述：流失明细
                -->
				<el-tab-pane label="流失明细" name="second">
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">区域:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
								<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">品牌:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
								<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">公司:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
								<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
							</el-select>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆大类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="mxQueryData.carPtype" size='small' placeholder="车辆大类" clearable @change="taskStatusChange">
								<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车辆细类:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="mxQueryData.carCtype" size='small' placeholder="车辆细类" clearable>
								<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">流失方向:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="mxQueryData.lostDirection" clearable>
								<el-option v-for="item in  missTargetCombo " :label="item.name" :value="item.code">
								</el-option>
							</el-select>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">流失原因:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="mxQueryData.lostReason" clearable>
								<el-option label="车辆转让或报废" value="clzr">
								</el-option>
								<el-option label="人在外地没时间保养" value="rzwd">
								</el-option>
								<el-option label="过路车" value="glc">
								</el-option>
								<el-option label="车很少用" value="chsy">
								</el-option>
								<el-option label="非车主本人接听电话" value="fbr">
								</el-option>
								<el-option label="外地车" value="qdc">
								</el-option>

								<el-option label="维修质量" value="wxzl">
								</el-option>
								<el-option label="维修价格" value="wxjg">
								</el-option>
								<el-option label="维修效率" value="wxxl">
								</el-option>
								<el-option label="服务态度" value="fwtd">
								</el-option>
								<el-option label="服务环境" value="fwhj">
								</el-option>
								<el-option label="路程远" value="lcy">
								</el-option>
								<el-option label="其他" value="qt">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">回访失败:</p>
						</el-col>
						<el-col :span="4">
							<el-select size="small" v-model="mxQueryData.failReason" clearable>
								<el-option label="电话错误停机或空号" value="dhtj">
								</el-option>
								<el-option label="人员不符" value="rybf">
								</el-option>
								<el-option label="未接通" value="wjt">
								</el-option>
								<el-option label="客户拒访" value="khjf">
								</el-option>
							</el-select>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">统计区间:</p>
						</el-col>
						<el-col :span='4'>
							<el-date-picker v-model="mxQueryData.startDate" size="small" style="width:90%;" type="date" clearable placeholder="">
							</el-date-picker>
						</el-col>
						<el-col :span='4'>
							<el-date-picker v-model="mxQueryData.stopDate" size="small" style="width:90%;" type="date" clearable placeholder="">
							</el-date-picker>
						</el-col>
						<el-col :span="1">
							<el-button type="primary" size="small" @click="detailQuery">查询</el-button>
						</el-col>
						<el-col :span="14" style="margin-left: -10px;text-align: right;">
							<el-button type="primary" size="small" @click="detailExport">导出</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-table :data="tableData.dataList" border>
							<el-table-column label="车主" prop="ownerName" width="110"></el-table-column>
							<el-table-column label="车牌号" prop="plateNum" width="110"></el-table-column>
							<el-table-column label="车架号" prop="vin" width="190"></el-table-column>
							<el-table-column label="车辆大类" prop="taskPcode" width="110"></el-table-column>
							<el-table-column label="车辆细类" prop="taskCode" width="110"></el-table-column>
							<el-table-column label="流失方向" prop="maintainAdress" width="140"></el-table-column>
							<el-table-column label="流失原因" prop="lostReason" width="140"></el-table-column>
							<el-table-column label="回访失败" prop="failReason" width="100"></el-table-column>
							<el-table-column label="流失日期" prop="lsDate" width="120"></el-table-column>
							<el-table-column label="回访结果" prop="visitResult" width="100"></el-table-column>
							<el-table-column label="有意进店" prop="intentionEnter" width="100"></el-table-column>
							<el-table-column label="意向等级" prop="intentionLevel" width="140"></el-table-column>
							<el-table-column label="是否保养" prop="ismaintained" width="100"></el-table-column>
							<el-table-column label="保养地点 " prop="maintainAdress" width="140"></el-table-column>

						</el-table>
						<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
						</el-pagination>
					</el-row>

				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				//当前页数
				CurentPage: 1,
				page: this.page,
				//界面切换
				activeName: 'first',
				//明细查询条件
				mxQueryData: {
					startDate: '', //区间开始时间
					stopDate: '', //区间结束时间
					carCtype: '', //车辆大类
					carPtype: '', //车辆细类
					lostDirection: '', //流失方向
					lostReason: '', //流失原因
					failReason: '', //回访失败
					area: '',
					brand: '',
					companyId: '',
				},
				//查询条件
				queryData: {
					startDate: '', //区间开始时间
					stopDate: '', //区间结束时间
					statisticalCaliber: '', //统计口径
					carCtype: '', //车辆大类
					carPtype: '', //车辆细类
					lostDirection: '', //流失方向
					lostReason: '', //流失原因
					failReason: '', //回访失败
					area: '',
					brand: '',
					companyId: '',
				},
				//流失明细表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				//流失原因
				missReasonCombo: [],
				//流失方向
				missTargetCombo: [],
				//车辆细类
				taskCTypeCombo: [],
				//车辆大类
				taskPTypeCombo: [{
					value: 'by',
					label: '保养'
				}, {
					value: 'bx',
					label: '保险'
				}, {
					value: 'ls',
					label: '流失'
				}, {
					value: 'ga',
					label: '关爱'
				}, {
					value: 'zh',
					label: '综合'
				}],
				//保险小类
				bxChild: [{
						value: 'sc',
						label: '手册'
					}, {
						value: 'xbx',
						label: '新保续'
					}, {
						value: 'xubx',
						label: '续保续'
					},
					{
						value: 'hy',
						label: '活跃'
					},
					{
						value: 'fhy',
						label: '非活跃'
					}
				],
				//关爱小类
				gaChild: [{
					value: 'sr',
					label: '生日'
				}, {
					value: 'ns',
					label: '年审'
				}, {
					value: 'rc',
					label: '日常'
				}, {
					value: 'yb',
					label: '延保'
				}, {
					value: 'hd',
					label: '活动'
				}],
				//自定义小类
				zdyChild: [{
					value: 'srhf',
					label: '三日回访',
				}],
				//流失小类
				lsChild: [{
						value: 'zls',
						label: '准流失'
					},
					{
						value: 'yls',
						label: '流失'
					}
				],
				//保养小类
				byChild: [{
						value: 'sb',
						label: '首保'
					}, {
						value: 'sbm',
						label: '目标月首保'
					}, {
						value: 'eb',
						label: '二保'
					},
					{
						value: 'ebm',
						label: '目标月二保'
					},
					{
						value: 'db',
						label: '定保'
					}
				],
				nameData: [],
				numData: [],
			}
		},
		methods: {
			//大饼图
			mounteds: function() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '来源占比',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: this.$data.nameData
					},
					series: [{
						name: '来源占比',
						type: 'pie',
						radius: '55%',
						//roseType: 'angle',
						data: this.$data.numData
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
			//切换界面
			handleCurrentChange: function(curpage) {
				this.$data.CurentPage = curpage;
				this.detailQuery();
			},
			//流失明细查询
			detailQuery: function() {
				if(this.$data.mxQueryData.startDate) {
					this.$data.mxQueryData.startDate = this.moment(this.$data.mxQueryData.startDate).format("YYYY-MM-DD");
				}
				if(this.$data.mxQueryData.stopDate) {
					this.$data.mxQueryData.stopDate = this.moment(this.$data.mxQueryData.stopDate).format("YYYY-MM-DD");
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$data.mxQueryData.area = this.$data.area;
					this.$data.mxQueryData.brand = this.$data.brand;
					this.$data.mxQueryData.companyId = this.$data.companyId;
					this.$http({
						method: 'POSt',
						url: this.API_ROOT + '/crm/contact/lossMonthStatisticsDetail', //url
						body: this.$data.mxQueryData,
						params: { //发送的参数
							start: this.$data.CurentPage,
							limit: this.$data.page.pageSize
						}
					}).then(function(resp) {
					debugger;
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData.dataList = resp.data.dataList;
						this.$data.tableData.total = resp.data.total;
					}, function(error) {
						// error
					})
				}

			},
			//流失明细导出
			detailExport: function() {
				if(this.$data.mxQueryData.startDate) {
					this.$data.mxQueryData.startDate = this.moment(this.$data.mxQueryData.startDate).format("YYYY-MM-DD");
				}
				if(this.$data.mxQueryData.stopDate) {
					this.$data.mxQueryData.stopDate = this.moment(this.$data.mxQueryData.stopDate).format("YYYY-MM-DD");
				}
				this.$http.post(this.API_ROOT + '/crm/contact/lossMonthStatisticsExcel', this.$data.mxQueryData, {
						params: {}
					})
					.then(resp => {
						if(resp.data.success) {
							debugger;
							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=流失明细导出-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}
					}, resp => {});

			},
			//切换标签页
			handleClick: function(tab, event) {

			},
			//查询
			query: function() {
				debugger;
				if(this.$data.queryData.startDate) {
					this.$data.queryData.startDate = this.moment(this.$data.queryData.startDate).format("YYYY-MM-DD");
				}
				if(this.$data.queryData.stopDate) {
					this.$data.queryData.stopDate = this.moment(this.$data.queryData.stopDate).format("YYYY-MM-DD");
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$data.queryData.area = this.$data.area;
					this.$data.queryData.brand = this.$data.brand;
					this.$data.queryData.companyId = this.$data.companyId;
					this.$http({
						method: 'POSt',
						url: this.API_ROOT + '/crm/contact/lossMonthStatistics', //url
						body: this.$data.queryData,
						params: { //发送的参数
						}
					}).then(function(resp) {
						this.$data.numData = resp.data.data;
						for(var i = 0; i < this.$data.numData.length; i++) {
							this.$data.nameData[i] = this.$data.numData[i].name;
						};
						this.mounteds();
					}, function(error) {
						// error
					})
				}

			},
			//车辆大类转换
			taskStatusChange: function(value) {
				debugger;
				switch(value) {
					case "by":
						this.$data.taskCTypeCombo = this.$data.byChild;
						this.$data.queryData.carCtype = '';
						this.$data.mxQueryData.carCtype = '';
						break
					case "bx":
						this.$data.taskCTypeCombo = this.$data.bxChild;
						this.$data.queryData.carCtype = '';
						this.$data.mxQueryData.carCtype = '';
						break
					case "ls":
						this.$data.taskCTypeCombo = this.$data.lsChild;
						this.$data.queryData.carCtype = '';
						this.$data.mxQueryData.carCtype = '';
						break
					case "ga":
						this.$data.taskCTypeCombo = this.$data.gaChild;
						this.$data.queryData.carCtype = '';
						this.$data.mxQueryData.carCtype = '';
						break
					default:
						this.$data.taskCTypeCombo = this.$data.zdyChild;
						this.$data.queryData.carCtype = '';
						this.$data.mxQueryData.carCtype = '';
						break
				}
			},
			//改变统计口径
			changeSelect: function() {
				this.$data.queryData.carCtype = '';
				this.$data.queryData.carPtype = '';
				this.$data.queryData.lostDirection = '';
				this.$data.queryData.lostReason = '';
				this.$data.queryData.failReason = '';
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			//获取流失原因下拉
			this.$http.get(this.API_ROOT + '/crm/loss/lossList', {
				params: {
					typeCode: "1"
				}
			}).then((response) => {
				// success callback
				this.$data.missReasonCombo = response.data.data;
			}, (response) => {
				// error callback
			});

			//获取流失方向下拉
			this.$http.get(this.API_ROOT + '/crm/loss/lossList', {
				params: {
					typeCode: "2"
				}
			}).then((response) => {
				// success callback
				debugger;
				this.$data.missTargetCombo = response.data.data;
			}, (response) => {
				// error callback
			});
		},
	}
</script>

<style>

</style>